<template>
  <span class="btn">
    <el-button type="warning"  style="width: 49%;" @click="wxsm">!!!填表前必看!!!</el-button>
    <el-button type="warning" plain :icon="WeiXiu" @click="add" style="width:49%;margin-bottom: 10px;margin-top:10px;">增加维修事项</el-button>
  </span>
  <div >
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="80%" style="height: 80vh; overflow: auto;">

      <RepairCategories />

    </el-dialog>
    <el-dialog v-model="dialog.show" :title="dialog.title"  width="450px" :close-on-click-modal="false">
      <div><Add
          v-if="dialog.show"
          v-model:show="dialog.show"
          @getTableData="getTableData"
          :id="dialog.id"
      /></div>
    </el-dialog>

    <el-table :data="tableData.records" border
              style="width: 100%">
      <el-table-column
          label="我的提交记录"
          align="center"
      >
        <el-table-column prop="type" label="维修类别" align="center" width="180"
                         :filters="[{
                          text: '公共设施维修', value: '公共设施维修' },
                          { text: '水电维修', value: '水电维修' },
                          { text: '安全系统维修',value: '安全系统维修'},
                          { text: '道路停车场维修',value: '道路停车场维修'},
                          { text: '房屋结构与装修维修',value: '房屋结构与装修维修'},
                          { text: '其他',value: '其他'} ]"
                         column-key="type"
                         :filter-method="filterHandler"
        >
        </el-table-column>
        <el-table-column prop="content" label="具体描述" align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="repairTime" label="预约时间" align="center" width="210">
        </el-table-column>
        <el-table-column prop="status"  label="处理结果" width="140" align="center"
                         :filters="[{
                          text: '待审核', value: 0 },
                          { text: '已通过', value: 1 },
                          { text: '被撤回',value: 3 },
                          { text: '被驳回',value: 2 }
                        ]"
                         column-key="status"
                         :filter-method="filterHandler"
        >
          <template #default="scope">
            <el-tag type="primary" v-if="scope.row.status === 0">待审核</el-tag>
            <el-tag type="success" v-else-if="scope.row.status === 1">已通过</el-tag>
            <el-tag type="danger" v-else-if="scope.row.status === 3">被撤回</el-tag>
            <el-tag type="info" v-else="scope.row.status === 2">被驳回</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            label="操作"
            width="190"
            align="center">
          <template #default="scope">
            <el-button type="danger" plain size="small" v-if="scope.row.status === 0" @click="del(scope.row.id,3)">撤回</el-button>
            <el-button type="warning" plain size="small" v-if="scope.row.status === 0" @click="update(scope.row.id)">修改</el-button>
            <el-tag type="success" plain  v-else-if ="scope.row.status === 1">已通过，无操作</el-tag>
            <el-tag type="info" plain v-else-if ="scope.row.status===3">被撤回，禁止操作</el-tag>
            <el-tag type="info" plain v-else ="scope.row.status===2">被驳回</el-tag>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
    <el-pagination
        background
        :page-count="tableData.pages"
        v-model:current-page="params.page"
        :total="tableData.total"
        :close-on-click-modal="false"
        @current-change="getTableData()"
        style="margin-top:15px;"></el-pagination>
  </div>
</template>

<script setup>
import WeiXiu from '@/views/service/components/icon/weixiu'
import { ref,reactive,computed } from 'vue'
import Add from './add'
import { get, post } from '@/plugins/axios'
import { getCookieForObject} from '@/util';
import {_axios} from '@/plugins/axios'
import {useRoute, useRouter} from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus'
const router = useRouter();
const route = useRoute()
const SearchKey = ref('')
const tableData = reactive({
  records: [] ,// 初始化为空数组
  pages: 0,
  total: 0
});
const params = reactive({
  page: 1,
  limit: 10
})
function getUserId(){
  const userinfo= getCookieForObject('user')
  return userinfo.id
}
const userId = getUserId()
const dialog = reactive({
  show: false,
  title: '',
  id: null
})
const dialogVisible = ref(false)
const dialogTitle = ref('')

getTableData()
function getTableData(){
  post('/repair/llist',{userId:userId,pageNo:params.page, pageSize:params.limit },content=>{
    tableData.records = content.records
    tableData.pages = content.pages
    tableData.total = content.total
  })
}
function add()
{
  dialog.title='添加报修事项'
  dialog.id=null
  dialog.show=true
}

function  wxsm ()
{
  router.push({ name: "wxsm" });
}

function filterHandler(value, row, column) {
  const property = column['property'];
  if (property === 'status') {
    return row.status === value;
  } else if (property === 'type') {
    return row.type === value;
  }
  return false;
}

function update(id)
{
  dialog.title='修改报修事项'
  dialog.id=id
  dialog.show=true
}
function del(id,status)
{
  ElMessageBox.confirm('确定撤回该报修记录吗？撤销后不可修复','警告',{
    type:'warning',
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  }).then(()=>{
    post('/repair/del',{id,status},content=>{
      getTableData()
    },)
  }).catch(()=>{})
}

</script>

<style scoped lang="scss">
</style>
